<template>
	<div class="contents">
		<el-tabs v-model="activeName">
			<el-tab-pane label="商品信息" name="first">
				<el-row class="row_info" :gutter="10">
					<el-col :span="4">
						<span>订单号：{{ detailData.no }}</span>
					</el-col>
					<el-col :span="4">
						<span>提交时间：{{ detailData.ctime }}</span>
					</el-col>
					<el-col :span="4">发货日期：{{ detailData.deliveryDate }}</el-col>
					<el-col :span="4">发货时间段：{{ detailData.deliveryTime }}</el-col>
					<el-col :span="4">
						付款状态：
						{{
						  detailData.payment_status == 1
							? '未付款'
							: detailData.payment_status == 2
							? '已付款'
							: '部分付款'
						}}
					</el-col>
				</el-row>
				<el-row class="row_info" :gutter="10">
					<el-col :span="4">
						<span>
							订单状态：
							{{
			  					detailData.status == 1
			  					  ? '待确认'
			  					  : detailData.status == 2
			  					  ? '待发货'
			  					  : detailData.status == 3
			  					  ? '发货'
			  					  : detailData.status == 4
			  					  ? '已完成'
			  					  : detailData.status == 5
			  					  ? '退货' :'已取消'
							}}
						</span>
					</el-col>
					<el-col :span="4">
						<span>订单来源：{{ detailData.origin }}</span>
					</el-col>
					<el-col :span="4">
						<span>客户：{{ detailData.cuser }}</span>
					</el-col>
					<el-col :span="6"><span>收货信息：{{ detailData.deliveryInfo }}</span></el-col>
				</el-row>
				<el-row class="row_info" :gutter="10">
					<el-col :span="4"><span>发货时间：{{ detailData.deliveryDate }}</span></el-col>
					<el-col :span="4"><span>签收时间：{{ detailData.signforTime }}</span></el-col>
					<el-col :span="4"><span>线路：{{ detailData.routeName}}</span></el-col>
					<el-col :span="4"><span>司机：{{ detailData.deliveryDriverName }}</span></el-col>
					<el-col :span="4"><span>货物送达状态：{{ detailData.sendStatus == 1?'未送达':'已送达'}}</span></el-col>
				</el-row>
				<el-row class="row_info">
					<el-col>
						<span>备注：{{ detailData.remarks }}</span>
					</el-col>
				</el-row>
				<div class="order-detail-title">
					<strong>.</strong>
					商品详情
					<!-- <el-button type="primary">表头设置</el-button> -->
				</div>
				<el-table :data="table1" style="width: 100%;">
					<el-table-column type="index" width="50" label="序号"></el-table-column>
					<el-table-column label="商品图片">
						<template slot-scope="scope">
							<el-image :src="scope.row.goodsImages.path"></el-image>
						</template>
					</el-table-column>
					<el-table-column prop="productName" label="商品"></el-table-column>
					<el-table-column prop="supplierName" label="联营供应商"></el-table-column>
					<el-table-column prop="describe" label="描述"></el-table-column>
					<el-table-column prop="unit" label="单位"></el-table-column>
					<el-table-column prop="qty" label="下单数量	"></el-table-column>
					<el-table-column prop="price" label="下单单价"></el-table-column>
					<el-table-column prop="price" label="下单小计">
						<template slot-scope="scope">
							<span>{{scope.row.qty * scope.row.price}}</span>
						</template>
					</el-table-column>
					<el-table-column prop="qty" label="发货数量"></el-table-column>
					<el-table-column prop="price" label="发货单价"></el-table-column>
					<el-table-column prop="address" label="发货小计">
						<template slot-scope="scope">
							<span>{{scope.row.qty * scope.row.price}}</span>
						</template>
					</el-table-column>
					<el-table-column prop="address" label="实际金额"></el-table-column>
					<el-table-column prop="returnNum" label="退货数量"></el-table-column>
					<el-table-column prop="returnPrice" label="退货金额"></el-table-column>
					<el-table-column prop="address" label="最近一次进价"></el-table-column>
					<el-table-column prop="address" label="最近一次下单单价"></el-table-column>
					<el-table-column prop="remarks" label="商品备注"></el-table-column>
				</el-table>
				<div class="order-detail-amount">
					<span class="order-detail__price">下单金额：¥{{ totalPrice }}</span>
					<span class="order-detail__price">
						应付金额：
						<span style="color: #f33333; font-size: 13px;">¥{{ totalPrice }}</span>
					</span>
				</div>
				<el-row class="row_info" type="flex">
					<el-col>货物送达图片</el-col>
					<el-col></el-col>
				</el-row>
				<div class="order-detail-title">
					<strong>.</strong>
					单据操作历史
				</div>
				<el-table :data="table2" style="width: 100%;">
					<el-table-column prop="remarks" label="操作员"></el-table-column>
					<el-table-column prop="address" label="操作类型"></el-table-column>
					<el-table-column prop="address" label="变更内容"></el-table-column>
					<el-table-column prop="address" label="变更前"></el-table-column>
					<el-table-column prop="address" label="变更后"></el-table-column>
					<el-table-column prop="address" label="操作IP"></el-table-column>
					<el-table-column prop="time" label="时间"></el-table-column>
				</el-table>
				<div class="order-detail-title">
					<strong>.</strong>
					订单流水
				</div>
				<el-table :data="table3" style="width: 100%;">
					<el-table-column prop="ctime" label="时间" :formatter="dateFormat"></el-table-column>
					<el-table-column prop="price" label="金额"></el-table-column>
					<el-table-column prop="remarks" label="备注"></el-table-column>
				</el-table>
				<div class="order-detail-feature">
					<el-button @click="goBack">返回</el-button>
				</div>
			</el-tab-pane>
		</el-tabs>
	</div>
</template>

<script>
	import { getOrderList, listDetail } from '@/api/order'
	import { handleActivePath } from '@/utils/routes'
	import { mapActions } from 'vuex'
	export default {
		data() {
			return {
				activeName: 'first',
				detailData: {},
				table1: [],
				table2: [],
				table3: [],
			}
		},
		async mounted() {
			const res = await listDetail({
				id: this.$route.query.id,
			})
			this.detailData = res.data
			this.table1 = res.data.order
			this.table2 = res.data.history
			this.table3 = res.data.returnItems
			this.detailData.signforTime = this.timestampToTime(this.detailData.signforTime)
		},
		computed: {
		  totalPrice() {
		    let finalPrice = 0
		    for (let book of this.table1) {
		      finalPrice += book.qty * book.price
		    }
		    return finalPrice
		  },
		},
		watch: {
			detailData: {
				handler: function(val, w) {
				},
				deep: true
			},
			'detailData.ctime'(e, w) {
				if (e != w) {
					this.detailData.ctime = this.timestampToTime(e)
				}
			},
		},
		methods: {
			timestampToTime(timestamp) {
				if (timestamp) {
				      var date = new Date(timestamp * 1000); //时间戳为10位需*1000(为秒)，时间戳为13位的话不需乘1000(毫秒)
				      var Y = date.getFullYear();
				      var M =
				        date.getMonth() + 1 < 10 ?
				        "0" + (date.getMonth() + 1) :
				        date.getMonth() + 1;
				      var D = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
				      var h = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
				      var m =
				        date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
				      var s = date.getSeconds();
				      return Y + "-" + M + "-" + D + " " + h + ":" + m + ":" + s;
				    }
			},
			dateFormat(row, column) {
				let time = row.ctime * 1000
				var date = new Date(time) //时间戳为10位需*1000，时间戳为13位的话不需乘1000
				var Y = date.getFullYear() + '-'
				var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-'
				var D = date.getDate() + ' '
				var h = date.getHours() + ':'
				var m = date.getMinutes() + ':'
				var s = date.getSeconds()
				return Y + M + D + h + m + s
			},
			...mapActions({
				delVisitedRoute: 'tabs/delVisitedRoute',
			}),
			async goBack() {
				const detailPath = await handleActivePath(this.$route, true)
				await this.$router.push('/order/orderlist')
				await this.delVisitedRoute(detailPath)
			},
		},
	}
</script>

<style lang="scss" scoped>
	.contents {
		padding: 10px;

		.row_info {
			padding: 12px 0;
			font-size: 12px;
		}

		.order-detail-title {
			width: 100%;
			height: 50px;
			padding: 10px 0 15px;
			font-size: 16px;
			text-align: left;
			border-bottom: 1px solid #eee;

			button {
				float: right;
				margin-right: 10px;
			}
		}

		.order-detail-amount {
			font-size: 14px;
			padding: 10px;
			text-align: right;

			.order-detail__price {
				margin-right: 15px;
				font-size: 14px;
				color: #495060;
			}
		}

		.order-detail-feature {
			width: 100%;
			overflow: hidden;
			text-align: left;
			position: fixed;
			bottom: 0;
			padding: 15px;
			border-top: 1px solid #eee;
			background-color: #fff;
		}
	}
</style>
